<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>心田花开</title>
    <script src="/front/rem.js"></script>
    <link rel="stylesheet" href="/front/reset.css">
    <link rel="stylesheet" href="/front/swiper-4.1.6.min.css">
    <script src="/front/swiper-4.1.6.min.js"></script>
    <style>
        .swiper-slide img{
            width: 100%;
            height: auto;
        }
        .swiper-container-main .swiper-slide{
            width: 1.5rem;
        }
        .item{
            text-align: center;
            line-height: 0.8rem;
            background-color: #33c072;
            color: #fff;
            width: 100%;
        }
        .phone{
            font-size: 0.32rem;
            text-align: right;
            line-height: 0.5rem;
        }
        .swiper-pagination-bullet-active{
            background-color: #33c072;
        }
        /*.img-box{*/
            /*margin-top: 0.1rem;*/
        /*}*/
        .img-box img{
            width: 100%;
            height: auto;
        }
        i{
            display: inline-block;
            width: 0.24rem;
            height: 0.24rem;
            background: url("/front/images/phone.png");
            background-size: cover;
        }
        .phone-list{
            text-align: right;
            padding-right: 0.2rem;
        }
    </style>
</head>
<body>
<header>
    <div class="swiper-container-head">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="http://www.qingshangyuwen.com/app/articles/2618">
                        <img src="/front/images/4banner.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="http://www.qingshangyuwen.com/app/articles/2603">
                        <img src="/front/images/8banner.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="http://static.xthk.cn/static/chengduQQ">
                        <img src="/front/images/5banner.jpg" alt="">
                    </a>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
</header>
<div class="main">
    <div class="swiper-container-main">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="item">
                        <span>龙腾</span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="item">
                        <span>阳光新业</span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="item">
                        <span>抚琴</span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="item">
                        <span>锦城大道</span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="item">
                        <span>金沙</span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="item">
                        <span>建设路</span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="item">
                        <span>汇源</span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="item">
                        <span>肖家河</span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="item">
                        <span>天府广场</span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="item">
                        <span>468</span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="item">
                        <span>蜀汉路</span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="item">
                        <span>太平园</span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="item">
                        <span>新华公园</span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="item">
                        <span>羊犀立交</span>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="item">
                        <span>桐梓林</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="phone">
        <div class="phone-list">
            <p>
                <span>咨询热线：</span>
                <a href="tel:028-64048373">
                    <i></i>
                    <span>028-64048373</span>
                </a>
            </p>
        </div>
    </div>
    <div class="img-box">
        <img src="/front/images/0.jpg" alt="">
    </div>
</div>
</body>
<script>
    var phoneList = {
        '1' : ['028-64048373'],
        '2' : ['028-84461373', '028-84431373'],
        '3' : ['028-87641373', '028-87541373'],
        '4' : ['028-84341373'],
        '5' : ['028-84731373', '028-84741373'],
        '6' : ['028-83251373', '028-83251378'],
        '7' : ['028-86951373', '028-86941373'],
        '8' : ['028-64911373', '028-64921373'],
        '9' : ['028-62491373', '028-64441373', '028-83255315'],
        '10' : ['028-84413373'],
        '11' : ['028-84678373'],
        '12' : ['028-62431373'],
        '13' : ['028-85504414'],
        '14' : ['028-85367208'],
        '15' : ['028-61107173', '028-61107073']
    }
    var mySwiperHead = new Swiper('.swiper-container-head .swiper-container', {
        autoplay: true,//可选选项，自动滑动
        loop: true,
        pagination: {
            el: '.swiper-pagination'
        }
    })
    var mySwiperMain = new Swiper('.swiper-container-main .swiper-container', {
        slidesPerView: 'auto',
        spaceBetween: 2,
        centeredSlides: true,
        slideToClickedSlide: true,
        resistanceRatio: 0,
        loop: true,
        autoplay: false,//可选选项，自动滑动
        observer:true,
        on: {
            click: function () {
                document.getElementsByClassName('img-box')[0].innerHTML = '<img src="/front/images/' + this.realIndex +'.jpg" alt="">'
                var str = ''
                phoneList[this.realIndex + 1].map(function (value, index) {
                    if (index === 0) {
                        str += '<p><span>咨询热线：</span><a href="tel:' + value + '"><i></i><span> ' + value + '</span></a></p>'
                    } else {
                        str += '<p><a href="tel:' + value + '"><i></i><span> ' + value + '</span></a></p>'
                    }
                })
                document.getElementsByClassName('phone-list')[0].innerHTML = str
            }
        }
    })
</script>
</html>